<script setup>
import {router} from "./router"
import {ref,onBeforeUpdate} from "vue"
import axios from "axios"

import close_black from "../public/icons/close_black.svg"
import bili22_login from "../public/images/login/bili22_login.png"
import bili33_login from "../public/images/login/bili33_login.png"
import mybilibiliQCode from "../public/images/login/mybilibiliQCode.png"

import downPoint from "../public/icons/downPoint.svg"
import upload_white from "../public/icons/home/upload_white.svg"

const http = "http"
const port = "8089"
const local = "localhost"

const loginPageBoxRef = ref(null)
const passwordLoginRef = ref(null)
const phoneLoginRef = ref(null)
const changePhoneAddrRef = ref(null)

const isAccout = ref(true)
const loginIsNull = ref(true)
const loginPhoneIsNull = ref(true)
const userAccout = ref("")
const userPassWord = ref("")
const userPhone = ref("")
const userYanZhenMa = ref("")
const phoneAddrNumber = ref("+86")

const isLoginStatus = ref(false)
const myImage = ref("")
const myName = ref("")
const myUid = ref()
const myBack = ref("")

const UserName = ref("")

const goToMaster = () => {
  router.push('/')
}
const goToAnime = () => {
  router.push('/anime')
}

let phoneInter = null
//生命周期事件
onBeforeUpdate(()=>{
  // console.log("App更新了")
  if(userAccout.value != "" && userPassWord.value != ""){
    loginIsNull.value = false
  }else{
    loginIsNull.value = true
  }

  if(userPhone.value != "" && userYanZhenMa.value != ""){
    loginPhoneIsNull.value = false
  }else{
    loginPhoneIsNull.value = true
  }
  if(loginPhoneIsNull.value){
    phoneInter = setInterval(()=>{

    },2000)
  }
})

//滚动条事件
const scrollMove = async(event) => {
  console.log(event)
}

//登录按键事件
const showLogin = async() => {
  loginPageBoxRef.value.style.display = "block"
}
const closeLoginBtn = async() => {
  loginPageBoxRef.value.style.display = "none"
  userAccout.value = ""
  userPassWord.value = ""
}

//登录方式
const passwordLogin = async() => {
  //密码登录
  isAccout.value = await true
  passwordLoginRef.value.style.color = "skyblue"
  phoneLoginRef.value.style.color = "rgb(50, 50, 50)"
  passwordLoginRef.value.style.cursor = "not-allowed"
  phoneLoginRef.value.style.cursor = "pointer"
}
const phoneLogin = async() => {
  isAccout.value = await false
  passwordLoginRef.value.style.color = "rgb(50, 50, 50)"
  phoneLoginRef.value.style.color = "skyblue"
  passwordLoginRef.value.style.cursor = "pointer"
  phoneLoginRef.value.style.cursor = "not-allowed"
}

//登录(将用户名密码数据发送到数据库)
const loginSendBtn = async() => {
  //测试:提取数据库中所有的数据
  // axios.get("/go2-api-user/mysql_find").then(async res=>{
  //   console.log(res.data)
  // }).catch(err=>console.log(err))
    axios.get(`${http}://${local}:${port}/mysql_query_test?accout=${userAccout.value}&password=${userPassWord.value}`).then(async res=>{
      // console.log(res.data)
      if(res.data.code == 200){
        //说明用户存在
        console.log(res.data)
        isLoginStatus.value = await true
        myImage.value = await res.data.user_image
        myName.value = await res.data.user_name
        myUid.value = await res.data.user_id
        myBack.value = await res.data.user_back
        loginPageBoxRef.value.style.display = "none"
        UserName.value = await res.data.user_name

      }else if(res.data.code == 404){
        //404说明没有找到用户
        isLoginStatus.value = false
        myImage.value = ""
      }
    }).catch(err=>console.log(err))
} 

//显示手机地址切换
const isPhoneAddrChange = ref(false)
const showAndChangePhoneAddr = async() => {
  if(isPhoneAddrChange.value == false){
    changePhoneAddrRef.value.style.transform = "rotate(180deg)"
    isPhoneAddrChange.value = true
  }else{
    changePhoneAddrRef.value.style.transform = "rotate(0deg)"
    isPhoneAddrChange.value = false
  }
}

//前往我的主页
const goToMyPage = () => {
  router.push({
    path:'/my',
    query: {
      uid:myUid.value,
      name: myName.value,
      image: myImage.value,
      back: myBack.value,
    }
  })
}

const submitBtn = () => {
  router.push('/admin-upload/admin-upload-page')
}

</script>

<template>
  <!-- 主页显示 -->
  <div class="all" @scroll="scrollMove">
    <div class="dialogBox">
      <div class="masterBox"><span @click="goToMaster()">首页</span></div>
      <div class="animeBox"><span @click="goToAnime()">动画</span></div>
      <div class="loginBox">
        <span v-if="isLoginStatus"><img :src="myImage" alt="" @click="goToMyPage"/></span>
        <span @click="showLogin" v-else>{{ "登录" }}</span>
      </div>
      <!-- <div v-if="UserName == 'admin'" @click="submitBtn" class="submitBtn"> -->
      <div @click="submitBtn" class="submitBtn">
        <img :src="upload_white" alt="" />
        <span>投稿</span>
      </div>
    </div>
    <div class="showBox">
      <router-view></router-view>
    </div>
  </div>

  <!-- 登录页 -->
  <div class="loginPageBox" ref="loginPageBoxRef">
    <div class="closeBtnBox">
      <div class="closeBtn">
        <img :src="close_black" alt="" @click="closeLoginBtn"/>
        <img :src="bili22_login" alt="22" />
        <img :src="bili33_login" alt="33" />
        <div class="scanBox">
          <div class="scanName">{{ "扫码登录" }}</div>
          <div class="scanMaster">
            <img :src="mybilibiliQCode" alt="二维码" />
          </div>
          <div class="scanBottom"></div>
        </div>
        <div class="fen1"></div>
        <div class="accoutBox">
          <div class="accoutName"><span @click="passwordLogin" ref="passwordLoginRef">{{ "密码登录" }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span @click="phoneLogin" ref="phoneLoginRef">短信登录</span></div>
          <div class="accoutScan" v-if="isAccout">
            <div class="accoutScan1">
              <span class="accoutScan1Name">账号</span>
              <input type="text" placeholder="请输入账号" v-model="userAccout"/>
            </div>
            <div class="accoutScan2">
              <span class="accoutScan2Name">密码</span>
              <input type="password" placeholder="请输入密码" v-model="userPassWord"/>
            </div>
          </div>
          <div class="accoutScan" v-else>
            <div class="accoutScan3">
              <span class="phoneAddrName">{{ phoneAddrNumber }}</span>
              <div class="changeBtnBox">
                <img :src="downPoint" alt="" ref="changePhoneAddrRef" 
                @click="showAndChangePhoneAddr"/>
              </div>
              <input type="text" placeholder="请输入手机号" v-model="userPhone" class="phoneNumber"/>
            </div>
            <div class="accoutScan4">
              <span class="accoutScan4Name">验证码</span>
              <input type="text" placeholder="请输入验证码" v-model="userYanZhenMa"/>
            </div>
          </div>

          <div class="accoutBtn" v-if="isAccout">
            <div class="registerBtn" @click="phoneLogin">注册</div>
            <div class="loginIsNullBtn" v-if="loginIsNull">登录</div>
            <div class="loginBtn" v-else @click="loginSendBtn">登录</div>
          </div>
          <div class="accoutBtnPhone" v-else>
            <div class="loginBtn">登录/注册</div>
          </div>

          <div class="shenming">声明:登录功能暂未开放,但不影响用户使用功能</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@media screen and (min-width: 1200px) and (max-width: 2000px){
  .all{
    /* min-width: 1860px; */
    width: 1855px;
    min-height: 924px;
    height: 100%;
    /* background-color: red; */
  }
  .dialogBox{
    min-width: 1855px;
    width: 100%;
    min-height: 50px;
    /* background-color: skyblue; */
    /* border-bottom: 1px solid rgba(200, 200, 200, 0.5); */
    display: flex;
    align-items: center;
    z-index: 4;
  }
  .showBox{
    width: 100%;
    min-height: 843px;
    height: 90%;
    /* background-color: orange; */
    z-index: -1;
  }
  .submitBtn{
    position: absolute;
    right: 10px;
    top: 05px;
    width: 90px;
    height: 40px;
    background-color: rgb(251,114,153);
    border-radius: 10px;
    z-index: 999;
    outline: none;
    color: #fff;
    border: 1px solid rgb(251,114,153);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .submitBtn img{
    width: 25%;
    height: 60%;
  }
}

@media screen and (min-width: 0px) and (max-width: 1199px){
    .dialogBox{
        min-width: 1199px;
        width: 100%;
        min-height: 50px;
    }
    .dialogBox{
      min-width: 1199px;
      width: 100%;
      min-height: 50px;
      /* background-color: skyblue; */
      /* border-bottom: 1px solid rgba(200, 200, 200, 0.5); */
      display: flex;
      align-items: center;
      z-index: 4;
    }
  .showBox{
    width: 100%;
    min-height: 843px;
    height: 90%;
    /* background-color: orange; */
    z-index: -1;
  }
}

body{
  overflow-anchor: none;
}

.dialogBox .masterBox{
  width: 5%;
  height: 100%;
  /* background-color: red; */
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.dialogBox .masterBox span{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  color: #fff;
  /* background-color: orange; */

}
.dialogBox .animeBox{
  width: 5%;
  height: 100%;
  /* background-color: skyblue; */
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.dialogBox .animeBox span{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  color: #fff;
  /* -webkit-text-stroke: 1px #000; */
  /* background-color: orange; */
}

.dialogBox .loginBox{
  position: absolute;
  right: 20%;
  top: 0.5%;
  width: 45px;
  height: 45px;
  z-index: 2;
  border-radius: 50%;
  background-color: rgb(0,174,236);
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.dialogBox .loginBox span{
  color: #fff;
  font-size: 14px;
}
.dialogBox .loginBox span img:nth-child(1){
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/**
登录页
*/
.loginPageBox{
  position: fixed;
  left: 0;
  top: 0;
  min-width: 1199px;
  width: 100%;
  min-height: 950px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  overflow-anchor: auto;
  z-index: 999;
}
.closeBtnBox{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.closeBtn{
  width: 60%;
  height: 60%;
  background-color: #fff;
  user-select: none;
  border-radius: 10px;
}
.closeBtn img:nth-child(1){
  position: absolute;
  right: 19.5%;
  top: 21%;
  width: 5%;
  height: 5%;
  cursor: pointer;
}
.closeBtn img:nth-child(2){
  position: absolute;
  left: 20%;
  bottom: 20%;
  width: 7%;
  height: 14%;
}

.closeBtn img:nth-child(3){
  position: absolute;
  right: 20%;
  bottom: 20%;
  width: 7%;
  height: 14%;
  border-radius: 10px;
}

.scanBox{
  position: absolute;
  left: 22%;
  top: 23%;
  width: 20%;
  height: 50%;
}
.scanName,
.accoutName{
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: rgb(50, 50, 50);
}
.scanMaster{
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanMaster img:nth-child(1){
  position: absolute;
  left: 17%;
  top: 10%;
  width: 80%;
  height: 80%;
}
.scanBottom{
  width: 100%;
  height: 20%;
}
.fen1{
  position: absolute;
  left: 43%;
  top: 27%;
  width: 0.2%;
  height: 40%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;

}
.accoutBox{
  position: absolute;
  left: 44%;
  top: 23%;
  width: 33%;
  height: 50%;
}
.accoutName span:nth-child(1){
  color: skyblue;
  cursor: pointer;
}
.accoutName span:nth-child(2){
  cursor: pointer;
}
.accoutScan{
  width: 100%;
  height: 45%;
}
.accoutScan1{
  position: absolute;
  left: 10%;
  top: 15%;
  width: 80%;
  height: 15%;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid rgba(200, 200, 200, 0.5);
}
.accoutScan1Name,
.accoutScan2Name{
  position: absolute;
  left: 10px;
  top: 20px;
  font-size: 17px;
}
.accoutScan2{
  position: absolute;
  left: 10%;
  top: 30.1%;
  width: 80%;
  height: 15%;
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid rgba(200, 200, 200, 0.5);
}
.accoutScan3{
  position: absolute;
  left: 10%;
  top: 15%;
  width: 80%;
  height: 15%;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid rgba(200, 200, 200, 0.5);
}
.accoutScan3 input{
  position: absolute;
  left: 20%;
  top: 35%;
  width: 50%;
  outline: none;
  border: none;
}
.accoutScan4{
  position: absolute;
  left: 10%;
  top: 30.1%;
  width: 80%;
  height: 15%;
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid rgba(200, 200, 200, 0.5);
}
.accoutScan4Name{
  position: absolute;
  left: 10px;
  top: 20px;
  font-size: 17px;
}
.accoutScan4 input{
  position: absolute;
  left: 20%;
  top: 25px;
  width: 85%;
  outline: none;
  border: none;
}
.accoutScan1 input{
  position: absolute;
  left: 55px;
  top: 25px;
  width: 85%;
  outline: none;
  border: none;
}
.accoutScan2 input{
  position: absolute;
  left: 55px;
  top: 25px;
  width: 85%;
  outline: none;
  border: none;
}
.accoutBtn{
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
}
.accoutBtnPhone{
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.registerBtn{
  margin-left: 60px;
  width: 35%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(200, 200, 200, 0.5);
  cursor: pointer;
}
.loginIsNullBtn{
  margin-left: 60px;
  width: 35%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  border: 1px solid #78cae7;
  background: #78cae7;
  cursor: not-allowed;
}
.loginBtn{
  margin-left: 60px;
  width: 35%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  border: 1px solid #00aeec;
  background: #00aeec;
  cursor: pointer;
}

.shenming{
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phoneAddrName{
  position: absolute;
  left: 3%;
  top: 30%;
}
.changeBtnBox{
  position: absolute;
  left: 13%;
  top: 32%;
  width: 5%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}
.changeBtnBox img:nth-child(1){
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  /* transform: rotate(180deg); */
}

</style>
